<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>

      <section class="graphical">
        <SearchCondition :formItemList="formItemList" :emitSearch="emitSearch" :resetSearch="resetSearch" @search="search" ref="mychild" />
      </section>
      <div class="decorate"></div>
      <section class="graphical2">
        <div class="btn_add" style="
            display: flex;
            align-items: center;
            justify-content: flex-start;
          ">
          <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" v-alive @click="pageTurn('/videoManageList/add')">添加</el-button>
        </div>
        <div>
          <el-table :data="tableData" class="tableStyle" :header-cell-style="$headerCellStyle" :border="$isborder" size="mini" ref="elTable" stripe>
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" align="center" :width="$widtha" fixed="left">
            </el-table-column>
            <el-table-column label="封面" align="left" prop="img" show-overflow-tooltip>
              <template slot-scope="scope">
                <a target="_blank" :href="$img(scope.row.img)" v-if="scope.row.img">
                  <div class="dataImg">
                    <img :src="$img(scope.row.img)" :onerror="$errImg" />
                  </div>
                </a>
              </template>
            </el-table-column>
            <el-table-column label="名称" align="left" prop="title" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="作者" align="left" prop="author" show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="出版社" align="left" prop="press" show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="出版时间" align="left" prop="pre_time" show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="操作" fixed="right" :header-align="$heaerOpt" :min-width="$widthb">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div v-alive class="refuse-box" @click="withdraw(scope.row.guid, scope.$index)" v-show="scope.row.is_play == 1">
                    撤回<span></span>
                  </div>
                  <div v-alive class="agree-box" @click="actiissue(scope.row.guid, scope.$index)" v-show="scope.row.is_play == 2">
                    发布<span></span>
                  </div>
                  <div v-alive @click="
                  handleCommand(
                        {type:'detail',
                        id:scope.row.guid},
                      )
                    " class="details-box">
                    详情
                  </div>
                  <div v-alive @click="
                      toPage(
                        '/videoManageList/change',
                        scope.row,
                        scope.row.is_play
                      )
                    " class="details-box">
                    <span></span>修改
                  </div>
                  <div v-alive @click="remove(scope.row.guid)" class="delete-box">
                    <span></span> 删除
                  </div>
                  <div v-alive @click="pageTurn('/videoManageList/resourceList',{id:scope.row.id})" class="details-box">
                    <span></span> 资源管理
                  </div>
                  <!-- <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
                    <p class="more-img">
                     
                    </p>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-alive :command="{
                          type: 'detail',
                          id: scope.row.id,
                          row: scope.row,
                        }">
                        <span class="details-box">详情</span>
                        <el-badge geis-dot v-if="!scope.row.is_have_area" class="ass"></el-badge>
                      </el-dropdown-item>
                      <el-dropdown-item v-alive :command="{
                          type: 'topic',
                          id: scope.row.id,
                          row: scope.row,
                        }">
                        <span class="details-box">题目管理</span>
                        <el-badge geis-dot v-if="!scope.row.is_have_area" class="ass"></el-badge>
                      </el-dropdown-item>

                      <el-dropdown-item v-alive :command="{
                          type: 'unit',
                          id: scope.row.id,
                          row: scope.row,
                        }">
                        <span class="details-box">单位管理</span>
                        <el-badge geis-dot v-if="!scope.row.is_have_area" class="ass"></el-badge>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination background prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper" :total="listTotal" :page-size="10" @current-change="handleCurrentChange" :current-page.sync="currentPage1">
          </el-pagination>

        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>

    <div>
      <Ddlmoadl ref="isdel" @deletesuccess="deletesuccess"></Ddlmoadl>
      <Isaudit ref="audit" @showAudit="showAudit"></Isaudit>
    </div>
  </div>
</template>

<script>
import Ddlmoadl from "@/components/Deletebtn/Deletetk.vue";
// import Changcode from "@/components/addDialog/index.vue";
import Isaudit from "@/components/agreeDialog2/index.vue";
// import Ispwd from "./components/index.vue";
export default {
  name: "AdminIndex",
  components: {
    Ddlmoadl,
    Isaudit,
  },
  data() {
    return {
      formItemList: [
        {
          label: "关键词",
          type: "input",
          param: "keywords",
        },
        {
          label: "是否发布",
          type: "select",
          selectOptions: [
            {
              value: "",
              name: "全部",
            },
            {
              value: 1,
              name: "发布",
            },
            {
              value: 2,
              name: "未发布",
            },
          ],
          param: "is_play",
          defaultSelect: "",
        }, {
          label: "类型",
          type: "select",
          param: "type_id",
          selectOptions: []
        }

      ],
      searchList: {
        start_time: "",
        end_time: "",
        keywords: "",
        node: "",
        pattern: "",
        is_play: "",
        system_unit_id: "",
      },
      emitSearch: false,
      resetSearch: true,
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      dialogVisible: false, //详情框
      particularsdata: {},
      deldialog: false, // 删框
      delid: "",
      isid: "",
      istype: "",
      typeid: "",
      copyType: "",
      idindex: "",
      is_super_admin: "false",
      typeList:[]
    };
  },

  mounted() {
    this.getTypeList()
   },
  activated() {
    if (this.$route.params.action === "refresh") {
      this.page = 1;
      this.listTotal = 0;
      this.currentPage1 = 1;
      this.tableData = [];
    }
    this.getList();
    this.$refs?.elTable?.doLayout();
    this.setPageTabs();
  },
  computed: {
    defaultImg() {
      return 'this.src="' + require("@/assets/img2/feng_shibaiimg.png") + '"';
    },
  },
  methods: {
    getTypeList() {
      this.request({ url: 'admin/resourceTotalType/filterList' }).then(res => {
        this.typeList = res.content.map(item =>{
          return {
            value: item.id,
            name: item.type_name
          }
        })
        this.formItemList[2].selectOptions = [{id:0,name: '全部'}].concat(this.typeList)
      }).catch(e => this.errorHandler(e))
    },
    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/resourceVideoManage/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: 10,
            ...this.searchList,
          },
        });
        if (res) {
          this.tableData = res.content.data;
          this.listTotal = res.content.total;
          this.currentPage1 = res.content.current_page;
        }
      } catch (err) {
        let error = err.message.split("/");
        if (error[0] == 203) {
          this.tableData = [];
          this.listTotal = 0;
        }
        this.errorHandler(err);
      }
    },

    // 发布 撤回
    showAudit() {
      if (this.istype == "发布") {
        this.cancelAndRelease(this.isid, 1);
      }
      if (this.istype == "撤回") {
        this.cancelAndRelease(this.isid, 2);
      }
    },
    // 撤回
    withdraw(id, index) {
      this.isid = id;
      let obj = {};
      obj.id = id;
      obj.index = index;
      this.indexid = obj;
      this.istype = "撤回";
      this.$refs.audit.isshow("确认撤回此视频吗？");
    },
    //发布
    actiissue(id, index) {
      this.isid = id;
      let obj = {};
      obj.id = id;
      obj.index = index;
      this.indexid = obj;
      this.istype = "发布";
      this.$refs.audit.isshow("是否发布此视频？");
    },
    async cancelAndRelease(id, is_play) {
      try {
        let res = await this.request({
          url: "/admin/resourceVideoManage/cancelAndRelease",
          method: "post",
          loading: true,
          data: {
            guids: id,
            is_play: is_play,
          },
        });
        if (res) {
          this.$message.success(res.msg);
          this.tableData[this.indexid.index].is_play = is_play;
          this.$refs.audit.isshow2();
          //this.getList()
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },
    /**
     * unit 单位管理
     */
    //下拉菜单的触发
    handleCommand(command) {
      console.log(command);
      switch (command.type) {
        case "unit":
          this.pageTurn("/videoManageList/unit", {
            act_id: command.id,
          });
          break;
        case "detail":
          console.log('去详情');

          this.pageTurn("/videoManageList/info", {
            id: command.id,
          });
          break;
        case "topic":
          this.pageTurn("/challenge/videoManageList/topic", {
            id: command.id,
          });
          break;
      }
    },

    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 搜索条件改变时
    search(params) {
      this.searchList = params;
      this.page = 1;
      this.getList();
    },
    // 跳转详情页
    // async particulars(id, row) {
    //   this.$router.push({
    //     path: "/answerActivities/activityList/activitInfo",
    //     query: {
    //       id: id,
    //       is_apply: row.is_play,
    //     },
    //   });
    // },
    //删除弹框
    async remove(id) {
      this.delid = id;
      this.$refs.isdel.delshow(id);
    },
    // 弹框确认后的回调
    async deletesuccess() {
      try {
        let res = await this.request({
          url: "/admin/resourceVideoManage/del",
          method: "post",
          loading: true,
          data: {
            guid: this.delid,
          },
        });
        if (res) {
          this.$message.success(res.msg);
          let that = this;
          setTimeout(() => {
            that.getList();
          }, 2000);
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },
    // 前往页面
    toPage(path, row) {
      this.$router.push({
        path: path,
        query: {
          id: row.guid,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.more-img {
  background-image: url("~@/assets/img2/more.png");
  background-repeat: no-repeat;
  background-size: 60% 100%;
  height: 15px;
  margin-left: 10px;
  margin-top: 4px;
  width: 28px;
}
</style>
<style lang="scss">
</style>
